<template>
  <view class="video-preview-container">
    <view v-if="videoUrl" class="video-section">
      <view class="video-preview-wrapper">
        <view class="video-thumbnail-wrapper" @click="openPreviewPage">
          <view class="play-overlay" v-if="videoUrl">
            <text class="play-text">▶</text>
          </view>
        </view>
      </view>
    </view>
    <view v-else class="no-video-section">
      <text class="no-video-text">暂无视频</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'VideoPreview',
  props: {
    videoUrl: {
      type: String,
      default: ''
    }
  },
  methods: {
    openPreviewPage() {
      if (!this.videoUrl) {
        uni.showToast({ title: '视频地址无效', icon: 'none' })
        return
      }
      const url = encodeURIComponent(this.videoUrl)
      uni.navigateTo({ url: `/pages/common/videopreview/index?url=${url}` })
    }
  }
}
</script>

<style lang="scss" scoped>
.video-preview-container { width: 100%; }
.video-section { padding: 0; }
.video-preview-wrapper { background: #000; border-radius: 8rpx; overflow: hidden; }
.video-thumbnail-wrapper { position: relative; width: 100%; height: 240rpx; border-radius: 12rpx; overflow: hidden; background: #000; border: 2rpx solid #e0e0e0; }
.thumb-fallback { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; }
.play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100rpx; height: 100rpx; background: rgba(0,0,0,0.8); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 999; }
.play-text { color: #fff; font-size: 40rpx; font-weight: bold; margin-left: 6rpx; }
.no-video-section { text-align: center; padding: 40rpx 20rpx; background: #f8f9fa; border-radius: 8rpx; }
.no-video-text { font-size: 26rpx; color: #999; }
</style>
